/* CSS波浪效果 */

.ripple {
    height: 1px;

    .waves {
        position: relative;
        width: 100%;
        height: 15%;
        margin-bottom: -7px;
        /*Fix for safari gap*/
        min-height: 80px;
        max-height: 150px;
        transform: translateY(-100%);
        z-index: 2;
    }

    .content {
        position: relative;
        height: 20vh;
        text-align: center;
        background-color: #fff;
    }

    /* Animation */
    .parallax > use {
        fill: rgba(249, 249, 249, 0.7);
        animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
        transition: all 0.3s;
    }

    .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
    }

    .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
    }

    .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

    @keyframes move-forever {
        0% {
            transform: translate3d(-90px, 0, 0);
        }

        100% {
            transform: translate3d(85px, 0, 0);
        }
    }

    /*适配移动端*/
    @media (max-width: 768px) {
        .waves {
            height: 40px;
            min-height: 40px;
        }

        h1 {
            font-size: 24px;
        }
    }
}
